<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限信息维护</title>
    <script src="../../../resources/app/all.js" type="text/javascript"></script>
    <style type="text/css">
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }
    </style>
</head>
<body class="easyui-layout" data-options="fit:true">

<div data-options="region:'center'" style="padding: 5px;">
    <form class="layui-form layui-form-pane" id="form" action="" lay-filter="example">
        <div class="layui-form-item" id="catalog">
            <label class="layui-form-label">所在目录</label>
            <div class="layui-input-block">
                <input type="text" id="tree" lay-filter="tree" autocomplete="off" placeholder="请输入目录"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="hidden" id="id" name="id">
                <input type="hidden" id="parentId" name="parentId">
                <input type="hidden" id="flag" name="flag">
                <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="url" lay-verify="required" autocomplete="off" placeholder="请输入URL"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限字符</label>
            <div class="layui-input-block">
                <input type="text" name="permission" lay-verify="required" autocomplete="off" placeholder="请输入权限字符"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" title="目录" checked="true">
                <input type="radio" name="type" value="2" title="菜单">
                <input type="radio" name="type" value="3" title="按钮">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-block">
                    <input type="text" name="icon" lay-verify="required" autocomplete="off" placeholder="请输入图标"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-sm" lay-event="edit">选择图标</a>
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="startColse" lay-skin="switch" lay-filter="switchTest"
                       title="开关">
            </div>
        </div>
    </form>
</div>
<div data-options="region:'south',border:false">
    <div class="dialog-button">
        <button id="save" class="layui-btn layui-btn-normal">确定</button>
        <button id="cancel" class="layui-btn layui-btn-primary">取消</button>
    </div>
</div>

<script>

    layui.config({
        base: pathName + '/resources/module/'
    }).extend({
        treeSelect: "treeSelect/treeSelect"
    }).use(['form', 'layedit', 'laydate', 'treeSelect'], function () {
        var form = layui.form
            , layer = layui.layer
            , treeSelect = layui.treeSelect;
        let parData = ToolUtil.OpenData();
        if (parData.act == 'edit') {
            let data = parData.data;
            data.startColse = true
            form.val('example', JSON.parse(JSON.stringify(data)));
        }else{
            if (parData.id == 0) {
                form.val('example', {
                    parentId: 0,
                    flag: 0
                });
            } else {
                form.val('example', {
                    parentId: parData.id,
                    flag: 0
                });
            }
        }
        form.on('switch(switchTest)', function (data) {
            form.val('example', {
                flag: this.checked ? '0' : '1'
            })
        });

        $('#save').on('click', function () {
            if (parData.act === 'add') {
                ToolUtil.POST({
                    url: global.api_url + '/sys/sysPermission',
                    data: JSON.stringify(ToolUtil.FormJSON("form")),
                    async: false,
                    success: function (obj) {
                        if (obj && obj.code === '00') {
                            saveClear()
                        } else if (obj.code === '98' || obj.code === '97') {
                            location.href = global.loginUrl;
                        } else {
                            layer.alert(obj.msg,{icon:5});
                        }
                    }
                });
            } else {
                ToolUtil.PUT({
                    url: global.api_url + '/sys/sysPermission',
                    data: JSON.stringify(ToolUtil.FormJSON("form")),
                    async: false,
                    success: function (obj) {
                        if (obj && obj.code === '00') {
                            saveClear()
                        } else if (obj.code === '98' || obj.code === '97') {
                            location.href = global.loginUrl;
                        } else {
                            layer.alert(obj.msg,{icon:5});
                        }
                    }
                });
            }
        });
        $('#cancel').on('click', function () {
            clear()
        });

        function saveClear() {
            parent.location.reload();
            clear();
        }

        function clear() {
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            layer.close(index);
        }

        treeSelect.render({
            elem: '#tree',
            data: global.api_url + '/sys/sysPermission/list',
            type: 'get',
            headers: {'token': ToolUtil.UserData().token},
            placeholder: '请输入目录',
            search: true,
            style: {
                folder: {
                    enable: false
                },
                line: {
                    enable: false
                }
            },
            // 点击回调
            click: function (d) {
                form.val('example', {
                    parentId: d.current.id
                })
            },
            // 加载完成后的回调函数
            success: function (d) {
                if (parData.act == 'edit') {
                    treeSelect.checkNode('tree', parData.data.parentId);
                }
//                 console.log(d);
// //                选中节点，根据id筛选
// //                 treeSelect.checkNode('tree', 3);
//                 console.log($('#tree').val());
// //                获取zTree对象，可以调用zTree方法
//                 var treeObj = treeSelect.zTree('tree');
//                 console.log(treeObj);
// //                刷新树结构
                treeSelect.refresh('tree');
            }
        });

    });
</script>
</body>
</html>